<%--
  Created by IntelliJ IDEA.
  User: 柚木
  Date: 2022/12/23
  Time: 12:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/includePage.css">
    <link rel="stylesheet" href="css/bookManagePage.css">
    <script src="https://kit.fontawesome.com/e91f25b25e.js" crossorigin="anonymous"></script>
    <title>图书管理系统-首页</title>
</head>

<%@ include file="IncludePage.jsp" %>

<%--    图书筛选--%>
    <div class="book-screen">
        <div class="select-item">
            <label class="select-label">作者</label>
            <select name="" class="select-comboBox author" id="author-comboBox" >
                <option id="all-author" selected = selected>请选择</option>
                <option id="LiuCiXin">刘慈欣</option>
                <option id="YuHua">余华</option>
                <option id="YuQiuYu">余秋雨</option>
                <option id="LinHuiYin">林徽因</option>
                <option id="ZhangDeFen">张德芬</option>
                <option id="MoYan">莫言</option>
                <option id="LaoShe">老舍</option>
                <option id="DongYe">东野圭吾</option>
            </select>
        </div>
        <div class="select-item">
            <label class="select-label" >类别</label>
            <select name="" class="select-comboBox" id="class-comboBox">
                <option id="all-class" selected = selected>请选择</option>
                <option id="science">科幻</option>
                <option id="novel">小说</option>
                <option id="informalEssay">随笔</option>
                <option id="education">教育</option>
                <option id="prose">散文</option>
            </select>
        </div>
        <div class="select-item">
            <label class="select-label"  >出版时间</label>
            <select name="" class="select-comboBox" id="pressTime-comboBox">
                <option value="" selected = selected>请选择</option>
                <option value="">1900s</option>
                <option value="">2000s</option>
                <option value="">2010s</option>
                <option value="">2020s</option>
            </select>
        </div>
        <div class="select-item">
            <label class="select-label" >图书语言</label>
            <select name="" class="select-comboBox" id="language-comboBox">
                <option value="" selected = selected>请选择</option>
                <option value="">Chinese</option>
                <option value="">English</option>
                <option value="">French</option>
                <option value="">Japanese</option>
            </select>
        </div>
        <div class="screen-btns">
            <button class="btn screen-btn blue" id="btn-select">筛选</button>
            <button class="btn screen-btn gray" id="btn-reset">重置</button>
            <button class="btn screen-btn gray" id="btn-new">新增</button>
        </div>
        <div class="book-search">
            <input type="text" class="search-input" id="search-input" placeholder="请输入书名">
            <button class="btn search-btn" id="search-btn" >搜索</button>
        </div>
    </div>
    <div class="search-auto-complete" id="auto-complete">
        <ul class="auto-complete-list" id="auto-complete-list">
<%--            <li data-bookName = "《三体》">《三体》</li>--%>
<%--            <li>《三体2》</li>--%>
<%--            <li>《三体3》</li>--%>
<%--            <li>《三体4》</li>--%>
<%--            <li>《三体5》</li>--%>
        </ul>
    </div>


<%--    新增图书--%>
    <div class="book-add" id="add-form">
        <div class="book-add-item">
            <label class="add-item-label">编号</label>
            <input type="text" class="add-item-input" id="bookId" placeholder="请输入编号">
        </div>
        <div class="book-add-item">
            <label class="add-item-label">名称</label>
            <input type="text" class="add-item-input" id="bookName" placeholder="请输入名称">
        </div>
        <div class="book-add-item">
            <label class="add-item-label">作者</label>
            <input type="text" class="add-item-input" id="bookAuthor" placeholder="请输入作者">
        </div>
        <div class="book-add-item">
            <label class="add-item-label">类别</label>
            <input type="text" class="add-item-input" id="bookClass" placeholder="请输入类别">
        </div>
        <div class="book-add-item">
            <label class="add-item-label">出版</label>
            <input type="text" class="add-item-input" id="bookPress" placeholder="请输入出版社">
        </div>
        <div class="book-add-item">
            <label class="add-item-label">描述</label>
            <input type="text" class="add-item-input" id="bookDescription" placeholder="请输入描述">
        </div>
        <div class="book-add-item">
            <label class="add-item-label">库存</label>
            <input type="text" class="add-item-input" id="bookInventory" placeholder="请输入库存">
        </div>
        <div class="book-add-buttons">
            <button class="btn add-book-btn gray" id="confirm-add-btn">确认添加</button>
            <button class="btn add-book-btn gray" id="close-form-btn">关闭</button>
        </div>
    </div>
<%--        编辑图书--%>
    <div class="book-edit" id="edit-form">
        <div class="book-edit-item">
            <label class="edit-item-label">编号</label>
            <input type="text" class="edit-item-input" id="edit-bookId" placeholder="请输入编号">
        </div>
        <div class="book-edit-item">
            <label class="edit-item-label">名称</label>
            <input type="text" class="edit-item-input" id="edit-bookName" placeholder="请输入名称">
        </div>
        <div class="book-edit-item">
            <label class="edit-item-label">作者</label>
            <input type="text" class="edit-item-input" id="edit-author" placeholder="请输入作者">
        </div>
        <div class="book-edit-item">
            <label class="edit-item-label">类别</label>
            <input type="text" class="edit-item-input" id="edit-class" placeholder="请输入类别">
        </div>
        <div class="book-edit-item">
            <label class="edit-item-label">出版</label>
            <input type="text" class="edit-item-input" id="edit-press" placeholder="请输入出版社">
        </div>
        <div class="book-edit-item">
            <label class="edit-item-label">描述</label>
            <input type="text" class="edit-item-input" id="edit-description" placeholder="请输入描述">
        </div>
        <div class="book-edit-item">
            <label class="edit-item-label">库存</label>
            <input type="text" class="edit-item-input" id="edit-inventory" placeholder="请输入库存">
        </div>
        <div class="book-edit-buttons">
            <button class="btn edit-book-btn gray" id="confirm-edit-btn">确认编辑</button>
            <button class="btn edit-book-btn gray" id="close-edit-form-btn">关闭</button>
        </div>
    </div>
<%--    图书表格--%>
    <div class="book-table">
        <table class="table" id="book-table">
            <tr class="table-title">
                <th class="col1">编号</th>
                <th class="col2">名称</th>
                <th class="col3">作者</th>
                <th class="col4">类别</th>
                <th class="col5">出版社</th>
                <th class="col6">描述</th>
                <th class="col7">库存</th>
                <th class="col8">操作</th>
            </tr>
<%--            <tr>--%>
<%--                <td>01</td>--%>
<%--                <td>《三体》</td>--%>
<%--                <td>刘慈欣</td>--%>
<%--                <td>科幻、小说</td>--%>
<%--                <td>重庆出版社</td>--%>
<%--                <td>这是一本我们期盼已久的科幻小说，它是对中国科幻的巨大贡献。</td>--%>
<%--                <td>28</td>--%>
<%--                <td class="btns-action">--%>
<%--                    <button class="action-btn" id="edit-book">编辑</button>--%>
<%--                    <button class="action-btn" id="delete-book">删除</button>--%>
<%--                </td>--%>
<%--            </tr>--%>
        </table>

        <div class="nav-bottom">
            <p class="total">共1条</p>
            <a href="#" class="link">上一页</a>
            <p class="current-page">第1页</p>
            <a href="#" class="link">下一页</a>
            <p>跳转到第</p>
            <input type="text" class="target-page">
            <p>页</p>
        </div>
    </div>


</div>
<script src="js/includePage.js"></script>
<script src="js/bookManage.js"></script>
</body>
</html>